<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flower Intelligence</title>
    <link rel="stylesheet" href="./popup.css" />
  </head>

  <body>
    <div class="chat-app">
      <div class="header">
        <h1>Flower Intelligence</h1>
        <div class="options-menu">
          <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="32" width="32" height="32" rx="4" transform="rotate(90 32 0)" fill="white" />
            <circle cx="16" cy="10" r="2" fill="#8B8B97" />
            <circle cx="16" cy="16" r="2" fill="#8B8B97" />
            <circle cx="16" cy="22" r="2" fill="#8B8B97" />
          </svg>
          <div class="dropdown-menu">
            <button id="clear-history-btn">
              <svg width="16" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12.2222 6.66667V17.7778H3.33333V6.66667H12.2222ZM10.8484 0.292894C10.6609 0.105357 10.4066 0 10.1413 0H5.41421C5.149 0 4.89464 0.105357 4.70711 0.292893L3.88889 1.11111H1C0.447716 1.11111 0 1.55883 0 2.11111V3.33333H15.5556V2.11111C15.5556 1.55883 15.1078 1.11111 14.5556 1.11111H11.6667L10.8484 0.292894ZM14.4444 5.44444C14.4444 4.89216 13.9967 4.44444 13.4444 4.44444H2.11111C1.55883 4.44444 1.11111 4.89216 1.11111 5.44444V17.7778C1.11111 19 2.11111 20 3.33333 20H12.2222C13.4444 20 14.4444 19 14.4444 17.7778V5.44444Z"
                  fill="#8B8B97"
                />
                <path d="M6 9V15.5" stroke="#8B8B97" stroke-width="2" stroke-linecap="round" />
                <path d="M10 9V15.5" stroke="#8B8B97" stroke-width="2" stroke-linecap="round" />
              </svg>
              Clear History
            </button>
            <div class="divider"></div>
            <a href="https://flower.ai">
              <div class="footerContainer">
                <img class="flowerLogo" src="./flower-logo-74.png" />
                <div class="footerText">Powered by <span>Flower Labs</span></div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div id="chat-history" class="chat-history"></div>
      <div class="input-section">
        <div class="input-area">
          <textarea id="message-input" placeholder="Ask a question..."></textarea>
          <button id="send-button">
            <span class="icon-wrapper">
              <svg
                id="default-send"
                width="30"
                height="30"
                viewBox="0 0 50 50"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect width="50" height="50" rx="12" fill="#F8F9FC" />
                <path
                  d="M16.9598 23.3005L25.3901 19.93L18.6961 25.0526L16.9598 23.3005ZM29.7034 24.2591L26.3329 32.6893L24.5887 30.9451L29.7034 24.2591ZM14.4141 21.9291C13.748 22.1954 13.5707 23.0557 14.0772 23.5637L17.8806 27.378C18.2349 27.7333 18.7976 27.7711 19.1962 27.4663L31.8562 17.7851L22.175 30.4451C21.8702 30.8437 21.908 31.4064 22.2633 31.7607L26.0776 35.5641C26.5856 36.0706 27.4459 35.8933 27.7122 35.2272L35.7044 15.2366C36.0308 14.4204 35.2209 13.6105 34.4047 13.9368L14.4141 21.9291Z"
                  fill="url(#paint0_linear_230_58)"
                />
                <defs>
                  <linearGradient
                    id="paint0_linear_230_58"
                    x1="16.5857"
                    y1="18.9134"
                    x2="47.0679"
                    y2="19.8788"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stop-color="#0070FF" />
                    <stop offset="0.75" stop-color="#9747FF" />
                  </linearGradient>
                </defs>
              </svg>
              <svg
                id="hover-send"
                width="32"
                height="32"
                viewBox="0 0 53 52"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect x="0.5" width="52" height="52" rx="10" fill="url(#paint0_linear_203_556)" />
                <path
                  d="M18.4598 24.3005L26.8901 20.93L20.1961 26.0526L18.4598 24.3005ZM31.2034 25.2591L27.8329 33.6893L26.0887 31.9451L31.2034 25.2591ZM15.9141 22.9291C15.248 23.1954 15.0707 24.0557 15.5772 24.5637L19.3806 28.378C19.7349 28.7333 20.2976 28.7711 20.6962 28.4663L33.3562 18.7851L23.675 31.4451C23.3702 31.8437 23.408 32.4064 23.7633 32.7607L27.5776 36.5641C28.0856 37.0706 28.9459 36.8933 29.2122 36.2272L37.2044 16.2366C37.5308 15.4204 36.7209 14.6105 35.9047 14.9368L15.9141 22.9291Z"
                  fill="white"
                />
                <defs>
                  <linearGradient
                    id="paint0_linear_203_556"
                    x1="11.801"
                    y1="-1.96846e-06"
                    x2="65.9526"
                    y2="49.4519"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stop-color="#0070FF" />
                    <stop offset="0.75" stop-color="#9747FF" />
                  </linearGradient>
                </defs>
              </svg>
            </span>
          </button>
        </div>
        <div id="prompt-suggestions" class="prompt-suggestions">
          <div class="prompt">Can you summarize this page?</div>
          <div class="prompt">What is this about?</div>
          <div class="prompt">Can you make a quick recap of my session?</div>
          <div class="prompt">Can you translate the content to</div>
        </div>
      </div>
    </div>
    <script type="module" src="./popup.js"></script>
  </body>
</html>
